Cara Buat Read More Auto Pada Blogspot

hahahha..awal-awal lagi aku dah buat tutorial. Bukan nak tunjuk aku ni pandai ataupun bagus. Sebenarnya aku bukannya pandai tentang HTML. Nak 'edit' blog aku ni pon aku cari tutorial dari blog orang lain. Jadi ilmu apa yang aku ada  sekarang ni aku nak kongsi dengan korang semua. Semalam aku bertungkus-lumus cari tutorial untuk buat 'read more' pada blog aku, tapi tak ada macam yang aku nak.

Walau macam mana bagaimana sekali pon aku terus jugak usaha mencari tutorial tersebut, hasilnya memang menghampakan.

Pepatah melayu ada berkata 'Nak Seribu Daya, Tak Nak Seribu Dalih'. Berpegang aku pada prinsip tu, akhirnya lewat malam semalam aku dapat jugak selesaikan masalah aku. Dan sekarang tibalah masa untuk aku berkongsi dengan korang.

Segala apa yang aku buat ni adalah dari tutorial orang lain. Aku cuma edit sikit je untuk jadikan tutorial aku sendiri. Dan aku konsi dengan korang. Lagi pon aku ni newbie lagi dalam dunia blogging nie. Pepatah orang putih ada berkata 'What You Give You Get Back'. Sebab tu lah aku buat tutorial ni.

Merapu panjang-panjang pon tak ada guna jugakkan? Buat penat aku menaip je. Kadang-kadang bukan ramai pon yg baca, diorang terus je ambil tutorial lepas tu banggakan diri cakap diorang yang buat sendiri. Itu terpulang la pada diorang. Aku cuma kongsi ilmu yang aku dapat je.

CARA-CARA
Ikut dengan teliti pasti akan jadi..

1- Pilih "DESIGN"

2- Pilih " EDIT HTML"

3- Aku sarankan korang download dulu template asal. Kalau tak nak pon takpa.

4- Pastikan korang tanda pada "Expand Widget Templates"

Korang cari kod </HEAD> , macam mana nak cari? korang tekan "Ctrl + F" pastu keluar macam gambar dekat atas. 'Copy' kod kat bawah dan 'paste' kat situ.

</HEAD>

Dah jumpa korang 'copy' kod merah bawah ni pulak.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}




//]]>
</script>

pastu 'paste' kat atas kod </HEAD> , tgk contoh gambar kat bawah.

Dah siap bahagian tu korang cari pulak kod  <p><data:post.body/></p> atau <data:post.body/> , cara nak cari sama macam cari kod </HEAD> tadi.

'Copy' kod merah kat bawah ni dan ganti pada kod <p><data:post.body/></p> atau <data:post.body/> tadi.

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>


<b:if cond='data:blog.pageType != "item"'>


<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>SAFIUDDIN2U.BLOGSPOT.COM</a></span>


</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Korang tukar SAFIUDDIN2U.BLOGSPOT.COM  dengan kod kat bawah :

Untuk hasil [read more "tajuk title korang"] :
read more "<data:post.title/>"</a>
bahagian yang tulis "read more" tu korang boleh tukar ikut suka hati..ikut korang la nak tulis apa pon.

Atau

Untuk 'read more button' macam aku :
<img border='0' src='http://i559.photobucket.com/albums/ss35/Wachid_rahman/icon%20blog/read-more.png'/>

Atau korang nak guna button sendiri :
<img border="0" src="URL gambar Read More"/>
korang edit dan letak URL gambar pada "URL gambar Read More".

lepas siap semua tu. Korang klik "SAVE TEMPLATE"
dan tengok hasilnya.

Tamat disini je la tutorial aku untuk korang. Kalau tak jadi/tak faham/tak puas ati korang boleh tinggalkan komen dekat bawah entry ni..

Nota tong sampah:
Maaf kalau tutorial aku tak bagus. Aku newbie. Komen la apa yang patut untuk majukan diri aku..